import React,{useState,useEffect,useContext} from 'react';
const themes = {
    light: {
        foreground: "#000000",
        background: "#eeeeee"
    },
    dark: {
        foreground: "#ffffff",
        background: "#222222"
    }
};
const ThemeContext = React.createContext(themes.light);
const SetC = React.createContext();
function HelloHook() {
    const [count,setCount] = useState(0);
    useEffect(()=>{
       document.title = `you click ${count} times`
    });
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
            <SetC.Provider value={setCount}>
                <ThemeContext.Provider value={themes.dark}>
                    <Toolbar></Toolbar>
                </ThemeContext.Provider>
            </SetC.Provider>

        </div>
    )
}
function Toolbar() {
    return (
        <ThemedButton></ThemedButton>
    )
}

function ThemedButton() {
    let theme = useContext(ThemeContext);
    let setc = useContext(SetC);
    return (
        <button type="button" onClick={()=>{setc(5)}} style={{background:theme.background,color:theme.foreground}}>
            I am styled by theme context!
        </button>
    )
}
export default HelloHook;